<template>
	<view class="phone-box">
		<view class="close-box">
			<view class="close" @tap="cancel(false)">
				<image src="../static/close.png" class="img" mode=""></image>
			</view>
		</view>
		<view class="item">
			<input type="text" class="uni-input inp" v-model="phone" placeholder="请输入手机号码">
		</view>
		<view class="item">
			<input type="text" class="uni-input inp winp" v-model="code" placeholder="输入验证码">
			<view class="code-bnt" :class="getCodeisWaiting?'cc':''" @tap="getCode">
				{{getCodeText}}
			</view>
		</view>
		<view class="y-bnt">
			<!-- <view class="cancel bnt" @tap="cancel">
				取消
			</view> -->
			<view class="confirm bnt" @tap="save">
				确认绑定
			</view>
		</view>
	</view>
</template>

<script>
	import {sendSms,verfiyCode} from '@/api/user.js'
	export default {
		data() {
			return {
				phone: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
				code: ''
			};
		},
		methods: {
			getCode() {
				const _this = this
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.setTimer()
				sendSms({tele:this.phone}).then((res) => {
					uni.showToast({title: '验证码已发送',icon:"none"});
				})
			},
			setTimer() {
				let holdTime = 59
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			save(){
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
					return false;
				}
				// this.$emit('confirmEvent')
				verfiyCode({tele:this.phone,code:this.code}).then((res) => {
					uni.showToast({title: '绑定成功',icon:"none"});
					uni.setStorageSync('userInfo',1)
					this.cancel(true)
				})
			},
			cancel(f){
				this.$emit('EventConfirm',f)
			}
		}
	}
</script>

<style lang="less" scoped>
.phone-box{
	padding-top: 72rpx;
	padding-bottom: 70rpx;
	background: #FFFFFF;
	width: 640rpx;
	border-radius: 15rpx;
	position: relative;
	.close-box{
		position: relative;
		.close{
			position: absolute;
			top: -88rpx;
			right: -18rpx;
		}
		.img{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.item{
		height: 88rpx;
		line-height: 88rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,73,91,0.05);
		border-radius: 44rpx;
		border: 2rpx solid #F1F3F4;
		margin: 0 32rpx;
		margin-bottom: 24rpx;
		position: relative;
		.inp{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			height: 70%;
			margin-top: 10rpx;
			padding-left: 30rpx;
		}
		.winp{
			width: calc(100% - 320rpx);
		}
	}
	.code-bnt{
		width: 236rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #666666;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.cc{
		opacity: 0.8;
	}

	.y-bnt{
		margin: 0 32rpx;
		margin-top: 80rpx;
		display: flex;
		.bnt{
			height: 88rpx;
			border-radius: 50rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			flex: 1;
			margin: 0 12rpx;
		}
		.confirm{
			background: #E4919D;
		}
		.cancel{
			background: #666;
		}
	}
}
</style>
